import { memo } from "react";
import { Link } from "react-router-dom";
import { Button } from "antd";
import Errors from "../../components/Errors";
import { useDispatch, useSelector } from "react-redux";
import {
  registFileUpdate,
  registSubmit,
  onUnload,
} from "../../store/module/registSlice";
import request from "../../request";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
const Regist = () => {
  let { email, username, password, errors } = useSelector(
    (state) => state.regist
  );
  let dispatch = useDispatch();
  let navigate = useNavigate();
  // 提交注册
  let fn = async (e) => {
    e.preventDefault();
    try {
      let res = await request.user.regist({ email, username, password });
      if (res.status == 1) {
        // 跳转到登录页面
        navigate("/login");
      } else {
        dispatch(registSubmit(res.message));
      }
    } catch (error) {
      // 处理请求错误
      console.error(error);
      dispatch(registSubmit("注册请求失败，请稍后再试"));
    }
  };
  useEffect(() => {
    return () => {
      // 清除注册状态
      dispatch(onUnload());
    };
  }, []);
  return (
    <div className="container page">
      <div className="row">
        <div className="col-md-6 offset-md-3 col-xs-12">
          <h1>注册</h1>
          <p className="text-xs-center">
            <Link to="/login">有账号去往登录页面</Link>
          </p>
          <Errors errors={errors} />
          <hr />
          <form onSubmit={fn}>
            <fieldset className="form-group">
              <input
                type="text"
                className="form-control form-control-lg"
                placeholder="用户邮箱"
                value={email}
                onChange={(e) => {
                  dispatch(
                    registFileUpdate({ key: "email", value: e.target.value })
                  );
                }}
              />
            </fieldset>
            <fieldset className="form-group">
              <input
                type="text"
                className="form-control form-control-lg"
                placeholder="用户名称"
                value={username}
                onChange={(e) => {
                  dispatch(
                    registFileUpdate({ key: "username", value: e.target.value })
                  );
                }}
              />
            </fieldset>
            <fieldset className="form-group">
              <input
                type="password"
                className="form-control form-control-lg"
                placeholder="用户密码"
                value={password}
                onChange={(e) => {
                  dispatch(
                    registFileUpdate({ key: "password", value: e.target.value })
                  );
                }}
              />
            </fieldset>
            <Button
              htmlType="submit"
              size="large"
              color="primary"
              variant="outlined"
            >
              注册
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default memo(Regist);
